<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-28 20:03:32
-->
<template>
  <el-card>
    <vxe-button status="primary" content="新增"></vxe-button>
    <vxe-button status="info" content="导出PDF" @click="topdf"></vxe-button>
    <vxe-button
      status="warning"
      content="导出其他格式文件"
      @click="openExportEvent"
    ></vxe-button>

    <vxe-table
      align="center"
      style="margin-top: 20px"
      border
      show-overflow
      height="600"
      :row-config="{ isHover: true, height: 100 }"
      :data="newsData"
      :scroll-y="{ enabled: true }"
      ref="tableRef"
      :export-config="{}"
    >
      <vxe-column type="seq" title="序号" width="80"></vxe-column>
      <vxe-column field="category" title="新闻类型" sortable></vxe-column>
      <vxe-column field="author" title="新闻作者"></vxe-column>
      <vxe-column field="title" title="新闻标题"></vxe-column>
      <vxe-column field="image" title="新闻图片">
        <template #default="{ row }">
          <img :src="row.image" alt="" style="width: 100px" />
        </template>
      </vxe-column>
      <vxe-column title="操作">
        <template #default="{ row }">
          <vxe-button status="primary" icon="vxe-icon-moon"></vxe-button>
          <vxe-button
            status="warning"
            icon="vxe-icon-edit"
            @click="updateNews(row)"
          ></vxe-button>
          <vxe-button status="danger" icon="vxe-icon-delete"></vxe-button>
        </template>
      </vxe-column>
    </vxe-table>

    <vxe-modal v-model="isShowModal" width="1000" show-footer>
      <template #title>
        <span style="color: red">修改新闻</span>
      </template>
      <template #default>
        <el-form :model="newsParams" label-width="100px">
          <el-form-item label="新闻类型">
            <el-input v-model="newsParams.category" />
          </el-form-item>
          <el-form-item label="新闻标题">
            <el-input v-model="newsParams.title" />
          </el-form-item>
          <el-form-item label="新闻作者">
            <el-input v-model="newsParams.author" />
          </el-form-item>
          <el-form-item label="新闻图片">
            <el-upload
              class="avatar-uploader"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="newsParams.image"
                :src="newsParams.image"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <QuillEditor toolbar="full" v-model:content="newsParams.content" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <vxe-button status="primary">确定</vxe-button>
        <vxe-button>取消</vxe-button>
      </template>
    </vxe-modal>

    <Vue3Html2pdf
      :show-layout="false"
      :float-layout="true"
      :enable-download="false"
      :preview-modal="true"
      :paginate-elements-by-height="15000"
      filename="hee hee"
      :pdf-quality="2"
      :manual-pagination="false"
      pdf-format="a4"
      pdf-orientation="landscape"
      pdf-content-width="800px"
      ref="html2Pdf"
    >
      <template #pdf-content>
        <!-- PDF Content Here -->
        <vxe-table
          align="center"
          style="margin-top: 20px"
          border
          show-overflow
          :row-config="{ isHover: true, height: 100 }"
          :data="newsData"
          :scroll-y="{ enabled: true }"
        >
          <vxe-column type="seq" title="序号" width="80"></vxe-column>
          <vxe-column field="category" title="新闻类型" sortable></vxe-column>
          <vxe-column field="author" title="新闻作者"></vxe-column>
          <vxe-column field="title" title="新闻标题"></vxe-column>
        </vxe-table>
      </template>
    </Vue3Html2pdf>
  </el-card>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
import { reqNewsData } from '@/api/news'
import type { INewsData } from '@/api/news'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import Vue3Html2pdf from 'vue3-html2pdf'
import type { UploadProps } from 'element-plus'
import Sortable from 'sortablejs'
const tableRef = ref()
const html2Pdf = ref()
const newsData = ref<INewsData[]>([])

const isShowModal = ref(false)

const mySort = () => {
  const el = document.querySelector('.vxe-table .vxe-table--body tbody')
  nextTick(() => {
    Sortable.create(el as HTMLElement, {
      animation: 150,
      onEnd: function (evt) {
        let arr = [] as any
        let oldIndex = evt.oldIndex
        let newIndex = evt.newIndex

        const code = newsData.value.splice(oldIndex as number, 1)[0]
        newsData.value.splice(newIndex as number, 0, code)

        arr = newsData.value
        newsData.value = []
        nextTick(() => {
          newsData.value = arr
        })
      },
    })
  })
}

const topdf = () => {
  html2Pdf.value.generatePdf()
}

const openExportEvent = () => {
  tableRef.value.openExport()
}

const getNewsData = async () => {
  const res = await reqNewsData()
  console.log(res)
  newsData.value = res
}

// 搜集表单数据
const newsParams = ref<INewsData>({
  title: '',
  author: '',
  image: '',
  content: '',
  createTime: '',
  category: '',
})
const updateNews = (row: INewsData) => {
  //
  isShowModal.value = true
  newsParams.value = { ...row }
}

onMounted(() => {
  getNewsData()
  mySort()
})

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile,
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>

<script lang="ts">
export default {
  name: 'NewsView',
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
